<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <select name="" id="level">
        <option value="xiaoqu">小区</option>
        <option value="cun">村</option>
        <option value="xiang">乡</option>
        <option value="xian">县</option>
        <option value="shi">市</option>
        <option value="sheng">省</option>
    </select>
    <input type="text" id="code" value="3701">
    <button onclick="loadbj()">加载边界</button>
    <div id="map" style="width: 800px; height: 600px"></div>
    <script>
        /** 面图层geojson，全省建议到乡，分市到村 */
        async function loadbj() {
            let ip = '6ql20nip.ipyingshe.net'
            // let url = 'http://60.211.159.133:8095/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&maxFeatures=50&outputFormat=application/json';
            let url = `http://${ip}/geoserver/rp7/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json&format_options=id_policy:reference_no=false`;
            let level = document.getElementById('level').value
            let code = document.getElementById('code').value
            let res = await $.getJSON(url, {
                typeName: `rp7:gv_${level}`,
                maxFeatures:500,
                cql_filter: `code like '${code}%'`,
                propertyName:'geom,code,codename,f142'
                // cql_filter: `INTERSECTS(geom, POLYGON((116 35, 116 36 , 117 36,117 35, 116 35)))`,
            })
            map.getSource('bj').setData(res);
            console.log(res)
        }

        mapboxgl.accessToken =
            "pk.eyJ1IjoiaG91eGlleXUiLCJhIjoiY2pldjE5amU3NndzeDM5bzd5bm9ncDgycyJ9.j1F-Lgid3L5k2Abm8_xTeQ";
        const map = new mapboxgl.Map({
            container: "map", // container ID
            style: "mapbox://styles/mapbox/streets-v11", // style URL
            center: [117.125829, 36.656704], // starting position [lng, lat]
            zoom: 12, // starting zoom
        });

        map.addControl(
            new MapboxLanguage({
                defaultLanguage: "zh-Hans",
            })
        );
        map.on("load", function () {
            map.addSource("bj", {
                type: "geojson",
                data: {
                    type: "FeatureCollection",
                    features: []
                }
            });
            map.addLayer({
                id: `fill_bj`,
                type: "fill",
                source: `bj`,
                paint: {
                    "fill-color": "red",
                    'fill-outline-color': "black"
                }
            });
        });
    </script>
</body>

</html>